import { createRoot } from 'react-dom/client'

// #1 首字母大写
const Hello = () => {
  // 必须有 return
  // return 啥表示渲染啥
  // 这儿 return 是一个 JSX
  // !注意：这儿的 this 是 undefined
  // 因为代码最终会打包，打包之后的代码会开启严格模式
  // React 内部其实最后会调用 Hello
  // 严格模式下直接调用 Hello，内部的 this 就是 undefined
  return <h1>Hello React</h1>
}
// #2 使用，单标签闭合或双标签

// render 解析函数组件的过程？
// render 解析标签 <Hello/>，发现是大写字母的开始的，会当做组件进行解析
// 又发现是一个函数组件
// 内部会直接调用这个函数，Hello()
// 得到了 JSX，经过 Babel 转成 React.createElement() 的形式
// React.createElement() 调用完毕之后的返回值就是虚拟 DOM
// render 负责把虚拟 DOM 转成真实 DOM 渲染到 #root 内
createRoot(document.querySelector('#root')).render(<Hello />)
